<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item><router-link to="/home">首页</router-link></a-breadcrumb-item>
      <a-breadcrumb-item>工作票管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card title="查询条件" style="width: 100%;">

      <a-form
        ref="formRef"
        :model="formState"
        layout="inline"
      >
        <a-form-item ref="workTicketCode" label="编号" name="workTicketCode">
          <a-input v-model:value="formState.workTicketCode" name="workTicketCode" maxlength="100"/>
        </a-form-item>
        <a-form-item ref="workLeader" label="负责人" name="workLeader">
          <a-input v-model:value="formState.workLeader" name="workLeader" maxlength="100"/>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="pageQuery">查询</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card title="查询结果" style="width: 100%;">
      <work-ticket-table ref="tableCompontent"></work-ticket-table>
      <template #extra>
        <div>
          <a-button type="primary" @click="gotoAddPage" size="small">
            添加
          </a-button> &nbsp;&nbsp;
          <a-button size="small">
            修改
          </a-button>&nbsp;&nbsp;
          <a-button size="small">
            删除
          </a-button>&nbsp;&nbsp;
          <a-button size="small">
            导出word
          </a-button>&nbsp;&nbsp;
        </div>
      </template>
    </a-card>
  </div>
</template>
<script lang="ts">
import WorkTicketTable from './work-ticket-table.vue'
import { defineComponent, reactive, ref, UnwrapRef } from 'vue'
import { WorkTicketModel } from '@/views/work-ticket/js/work-ticket-model'

export default defineComponent({
  components: {
    WorkTicketTable
  },
  methods: {
    gotoAddPage () {
      this.$router.push('/work-ticket/work-ticket/form')
    }
  },
  setup () {
    const formRef = ref()
    const formState: UnwrapRef<WorkTicketModel> = reactive({
      workTicketCode: '',
      workLeader: ''
    })
    const tableCompontent = ref(null)
    const pageQuery = () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      tableCompontent.value && tableCompontent.value.pageQuery(formState.workTicketCode, formState.workLeader)
    }
    return {
      formRef,
      formState,
      tableCompontent,
      pageQuery
    }
  }
})
</script>
